import { Card, Row, Col, Typography, Button, Statistic } from 'antd';
import {
  SafetyCertificateOutlined,
  CloudServerOutlined,
  DatabaseOutlined,
  ClockCircleOutlined,
  MedicineBoxOutlined,
  TeamOutlined,
  ShopOutlined
} from '@ant-design/icons';
import '../css/homePage.css';

const { Title, Paragraph } = Typography;

export default function HomePage() {
  return (
    <div className="home-container">      <div className="hero-section">
        <Row gutter={[32, 32]} align="middle">
          <Col xs={24} md={12}>
            <div className="hero-content">
              <Title level={1} className="hero-title">
                山西碧锦纳川医药有限公司
              </Title>
              <Paragraph className="hero-description">
                采用先进的信息化系统，为医疗机构提供专业、高效、安全的药品供应链全流程解决方案
              </Paragraph>
              <div className="hero-features">
                <Row gutter={[16, 16]}>
                  <Col span={12}>
                    <Card className="feature-highlight" >
                      <SafetyCertificateOutlined className="highlight-icon" />
                      <div>全程可追溯</div>
                    </Card>
                  </Col>
                  <Col span={12}>
                    <Card className="feature-highlight" >
                      <CloudServerOutlined className="highlight-icon" />
                      <div>智能调度</div>
                    </Card>
                  </Col>
                  <Col span={12}>
                    <Card className="feature-highlight" >
                      <DatabaseOutlined className="highlight-icon" />
                      <div>库存管理</div>
                    </Card>
                  </Col>
                  <Col span={12}>
                    <Card className="feature-highlight" >
                      <ClockCircleOutlined className="highlight-icon" />
                      <div>及时配送</div>
                    </Card>
                  </Col>
                </Row>
              </div>
              {/* <Button type="primary" size="large" className="hero-button">
                开始使用
              </Button> */}
            </div>
          </Col>
          <Col xs={24} md={12}>
            <div className="hero-image">
              <img src="/src/assets/medical-supply.svg" alt="医药供应链" />
            </div>
          </Col>
        </Row>
      </div><div className="about-section">
        <Title level={2} className="about-title">关于我们</Title>
        <Paragraph className="about-description">
          我们是一家专业的医药流通企业，致力于为医疗机构和患者提供安全、高效的药品供应链服务。
          通过先进的技术和专业的团队，确保每一个环节的质量和安全。
        </Paragraph>
        
        <Row gutter={[32, 32]} className="stats-row">
          <Col xs={12} sm={12} md={6}>
            <Statistic title="服务医疗机构" value={1000} suffix="+" />
          </Col>
          <Col xs={12} sm={12} md={6}>
            <Statistic title="年配送量" value={5000} suffix="万件" />
          </Col>
          <Col xs={12} sm={12} md={6}>
            <Statistic title="覆盖城市" value={100} suffix="+" />
          </Col>
          <Col xs={12} sm={12} md={6}>
            <Statistic title="准时送达率" value={99.9} suffix="%" />
          </Col>
        </Row>
      </div>

      <Title level={2} className="section-title">我们的优势</Title>
      <Row gutter={[24, 24]} className="feature-section">
        <Col xs={24} sm={24} md={8}>
          <Card 
            className="feature-card"
            
          >
            <div className="card-icon">
              <SafetyCertificateOutlined />
            </div>
            <Title level={3}>药品仓储</Title>
            <Paragraph>
              现代化药品仓储设施，严格遵守GSP标准，
              确保药品存储安全，实现智能化库存管理
            </Paragraph>
          </Card>
        </Col>
        <Col xs={24} sm={24} md={8}>
          <Card 
            className="feature-card"
            
          >
            <div className="card-icon">
              <CloudServerOutlined />
            </div>
            <Title level={3}>冷链物流</Title>
            <Paragraph>
              专业的温控运输系统，全程监控，
              保证药品运输过程中的质量安全
            </Paragraph>
          </Card>
        </Col>
        <Col xs={24} sm={24} md={8}>
          <Card 
            className="feature-card"
            
          >
            <div className="card-icon">
              <DatabaseOutlined />
            </div>
            <Title level={3}>信息化管理</Title>
            <Paragraph>
              采用先进的信息管理系统，实现药品流通全过程可追溯，
              提供实时监控和数据分析
            </Paragraph>
          </Card>
        </Col>      </Row>

      <div className="partners-section">
        <Title level={2} className="section-title">合作伙伴</Title>
        <Row gutter={[24, 24]} className="partner-logos">
          <Col xs={12} sm={8} md={6}>
            <Card className="partner-card" >
              <MedicineBoxOutlined className="partner-icon" />
              <Title level={4}>大型医院</Title>
            </Card>
          </Col>
          <Col xs={12} sm={8} md={6}>
            <Card className="partner-card" >
              <TeamOutlined className="partner-icon" />
              <Title level={4}>医药企业</Title>
            </Card>
          </Col>
          <Col xs={12} sm={8} md={6}>
            <Card className="partner-card" >
              <ShopOutlined className="partner-icon" />
              <Title level={4}>连锁药店</Title>
            </Card>
          </Col>
          <Col xs={12} sm={8} md={6}>
            <Card className="partner-card" >
              <CloudServerOutlined className="partner-icon" />
              <Title level={4}>物流公司</Title>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  );
}